<template>
    <div>
      <detail-banner 
      :sightName="sightName"
      :bannerImg="bannerImg"
      :bannerImgs="gallaryImgs">
      </detail-banner>
      <detail-header></detail-header>
      <div class="content">
         <detail-list :list="list"></detail-list>
      </div>
      </div>
</template>
<script>
import DetailBanner from './components/Banner.vue';
import DetailHeader from './components/Header.vue';
import DetailList from "./components/List.vue";
import axios from 'axios';
export default{
   name: 'Detail',
   components:{
      DetailBanner,
      DetailHeader,
      DetailList
   },
   methods :{
     getDetailInfo (){
         axios.get('/api/detail.json?id=',{
            params:{
               id:this.$route.params.id
            }
         })
         .then(this.handleGetDataSucc)
     } ,
     handleGetDataSucc(res){
         res = res.data
          if (res.ret && res.data){
            const data = res.data
            this.bannerImg = data.bannerImg
            this.sightName = data.sightName
            this.gallaryImgs = data.gallaryImgs
            this.list = data.categoryList
          }
     }
   },
   mounted (){
      this.getDetailInfo ()
   },
   data () {
      return {
         sightName:'',
         bannerImg:'',
         gallaryImgs:[],
         list:[]
      }
   }
}
</script>
<style scoped>
.content{
   height: 50rem;
}
</style>